
<template>
  <ul class="view-sale">
      <li class="view-sale-item" v-for="(item,index) in viewItem" :key="index">
          <section class="view-sale-item-thumb">
              <img :src="item.thumb" alt="">
          </section>
          <section class="view-sale-item-text">
              <h4 class="view-sale-item-text-name">{{item.name}}</h4>
              <span class="view-sale-item-text-price">￥{{item.price}}</span>
              <span class="view-sale-item-text-number">月销量:{{item.number}}件</span>              
          </section>
      </li>
  </ul>
</template>
<script>
export default {
  props:['view-item']
}
</script>
<style lang="scss">
@import "../../../../assets/scss/_index.scss";
.view{
    &-sale{
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        &-item{
            width: 48%;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: px2rem(20);
            padding-top: px2rem(10);
            padding-bottom: px2rem(10);
            &-thumb{
                width: px2rem(205);
                height: px2rem(234);
                img{
                    width: 100%;
                }
            }
            &-text{
                margin-top: px2rem(24);
                h4{
                    font-size: px2rem(20);
                    color: #333333;
                }
                &-price{
                    font-size: px2rem(18);
                    color: #d42e2e;
                    margin-top: px2rem(12);
                }
                &-number{
                    font-size: px2rem(16);
                    color: #333333;
                   margin-left:  px2rem(55);
                }
            }
        }
    }
}
</style>
